<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="utf-8">
    <title>Layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../../../static/layui-master/dist/css/layui.css" media="all">
    <link rel="stylesheet" href="../../../static/layuimini/css/public.css" media="all">
    <!--  设置单元格高度  -->
    <style type="text/css">
        .layui-table-cell {
            height: auto;
            line-height: 20px;
        }
    </style>
    <script src="../../../static/js/jquery-3.6.0.min.js" charset="UTF-8"></script>
</head>
<body>
<div class="layuimini-container">
    <div class="layuimini-main">
        <fieldset class="table-search-fieldset">
            <legend>搜索信息</legend>
            <div style="margin: 10px 10px 10px 10px">
                <form class="layui-form layui-form-pane" action="">
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <select name="schoolYear" lay-verify="required" lay-verType="tips" lay-filter="schoolYear"
                                    id="schoolYear">
                                <option value="">学年</option>
                            </select>
                        </div>
                        <div class="layui-inline">
                            <select name="semester" lay-verify="required" lay-verType="tips" lay-filter="semester"
                                    id="semester">
                                <option value="">学期</option>
                            </select>
                        </div>
                        <div class="layui-inline">
                            <select name="department" lay-verify="required" lay-verType="tips" lay-filter="department"
                                    id="department">
                                <option value="">系别</option>
                            </select>
                        </div>
                        <div class="layui-inline">
                            <select name="major" lay-verify="required" lay-verType="tips" lay-filter="major" id="major">
                                <option value="">专业</option>
                            </select>
                        </div>
                        <div class="layui-inline">
                            <select name="grade" lay-verify="required" lay-verType="tips" lay-filter="grade" id="grade">
                                <option value="">年级</option>
                            </select>
                        </div>
                        <div class="layui-inline">
                            <select name="class" lay-verify="required" lay-verType="tips" lay-filter="class" id="class">
                                <option value="">班级</option>
                            </select>
                        </div>
                    </div>
                </form>
            </div>
        </fieldset>
    </div>
</div>
<table class="layui-hide" id="classSchedule"></table>

<script src="../../../static/layui-master/dist/layui.js" charset="utf-8"></script>
<script>
    layui.use('table', function () {
        var table = layui.table;

        table.render({
            elem: '#classSchedule'
            , url: '../../../api/classSchedule.json'
            , cellMinWidth: 80 //全局定义常规单元格的最小宽度
            , cols: [[
                {field: 'time', title: '时间', align: 'center'}
                , {field: 'Monday', title: '周一', align: 'center'} //width 支持：数字、百分比和不填写。你还可以通过 minWidth 参数局部定义当前单元格的最小宽度
                , {field: 'Tuesday', title: '周二', align: 'center'}
                , {field: 'Wednesday', title: '周三', align: 'center'}
                , {field: 'Thursday', title: '周四', align: 'center'}
                , {field: 'Friday', title: '周五', align: 'center'} //单元格内容水平居中
                , {field: 'Saturday', title: '周六', align: 'center'} //单元格内容水平居右
                , {field: 'Sunday', title: '周天', align: 'center'}
            ]]
        });
    });
</script>

<script>
    layui.use(['form', 'table'], function () {
        var $ = layui.jquery,
            form = layui.form,
            table = layui.table;

        //初始化学年信息
        $.get("/getSchoolYear", function (data) {
            $.each(data, function (index, element) {
                $("#schoolYear").append("<option value='" + element.value + "'> " + element.text + " </option>");
            });
            layui.form.render('select');
        }, "json");
        //初始化系别信息
        $.get("/getDepartment", function (data) {
            $.each(data, function (index, element) {
                $("#department").append("<option value='" + element.departmentName + "'> " + element.departmentName + " </option>");
            });
            layui.form.render('select');
        }, "json");
        //级联学期查询
        form.on('select(schoolYear)', function (data) {
            console.log('select.schoolYear：', this, data);
            $.get("/getSemester", function (data) {
                $("#semester").empty();
                $("#major").empty();
                $("#major").append("<option value=''>专业</option>");
                $("#grade").empty();
                $("#grade").append("<option value=''>年级</option>");
                $("#class").empty();
                $("#class").append("<option value=''>班级</option>");
                $("#semester").append("<option value=''>学期</option>");
                $.each(data, function (index, element) {
                    $("#semester").append("<option value='" + element + "'>" + element + "</option>");
                });
                layui.form.render('select');
            }, "json");
        });
        //级联专业查询
        form.on('select(department)', function (data) {
            console.log('select.department：', this, data);
            let departmentName = $("#department>option:selected").val();
            console.log("departmentName=" + departmentName);
            $.get("/getMajorByDepartment", {departmentName: departmentName}, function (data) {
                $("#grade").empty();
                $("#grade").append("<option value=''>年级</option>");
                $("#class").empty();
                $("#class").append("<option value=''>班级</option>");
                $("#major").empty();
                $("#major").append("<option value=''>专业</option>");
                $.each(data, function (index, element) {
                    $("#major").append("<option value='" + element.majorName + "'>" + element.majorName + "</option>");
                });
                layui.form.render('select');
            }, "json");
        });
        //级联年级查询
        form.on('select(major)', function (data) {
            console.log('select.major：', this, data);
            let majorName = $("#major>option:selected").val();
            console.log("majorName=" + majorName);
            $.get("/getGradeByMajor", {majorName: majorName}, function (data) {
                $("#grade").empty();
                $("#grade").append("<option value=''>年级</option>");
                $.each(data, function (index, element) {
                    $("#grade").append("<option value='" + element.gradeName + "'>" + element.gradeName + "</option>");
                });
                layui.form.render('select');
            }, "json");
        });
        //级联班级查询
        form.on('select(grade)', function (data) {
            console.log('select.grade：', this, data);
            let gradeName = $("#grade>option:selected").val();
            console.log("gradeName=" + gradeName);
            $.get("/getClassByGrade", {gradeName: gradeName}, function (data) {
                $("#class").empty();
                $("#class").append("<option value=''>班级</option>");
                $.each(data, function (index, element) {
                    $("#class").append("<option value='" + element.className + "'>" + element.className + "</option>");
                });
                layui.form.render('select');
            }, "json");
        });
        //选择年级后更新表格
        form.on('select(class)', function (data) {
            console.log('select.class：', this, data);
            //ajax更新表格


        });

        // 监听搜索操作
        form.on('submit(data-search-btn)', function (data) {
            var result = JSON.stringify(data.field);
            layer.alert(result, {
                title: '最终的搜索信息'
            });

            //执行搜索重载
            table.reload('currentTableId', {
                page: {
                    curr: 1
                }
                , where: {
                    searchParams: result
                }
            }, 'data');

            return false;
        });

        //监听下拉框
        form.on('select(semester)', function (data) {
            console.log('select.semester：', this, data);
        });
    });
</script>

</body>
</html>